<script setup lang="ts">
import { ref } from 'vue'
import * as A from './algo'

const num = ref('355')
const den = ref('113')
const int = ref('')
const frac = ref('')
const rep = ref('')

frac2dec()

function frac2dec() {
  try {
    const res = A.frac2dec(num.value, den.value)
    int.value = res.int
    frac.value = res.frac
    rep.value = res.rep
  } catch { }
}

function dec2frac() {
  try {
    const res = A.dec2frac(int.value, frac.value, rep.value)
    num.value = res.num
    den.value = res.den
  } catch { }
}
</script>

<template>
  <div class="eqn">
    <div class="frac">
      <input type="text" v-model="num" @input="frac2dec">
      <div class="line">&nbsp; &nbsp;</div>
      <input type="text" v-model="den" @input="frac2dec">
    </div>
    =
    <div class="dec">
      <input type="text" v-model="int" @input="dec2frac">.
      <input type="text" v-model="frac" @input="dec2frac">
      (<input type="text" class="rep" v-model="rep" @input="dec2frac">)
    </div>
  </div>
</template>

<style scoped>
.eqn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;

  * {
    display: block;
    min-width: 0;
    text-align: center;
  }

  >* {
    min-width: 7em;
  }
}

.frac {
  flex: 2;

  display: flex;
  flex-direction: column;

  .line {
    width: 100%;
    text-align-last: justify;
    text-decoration: line-through;
  }
}

.dec {
  flex: 5;

  display: flex;
  align-items: center;

  >input {
    flex: 1;
  }

  .rep {
    flex: 3;
  }
}
</style>
